<template>
    <div>
        <div class="tableHeader">
            <div class="tableHeaderTitle">文件列表</div>
            <div class="tableHeaderMenu">
                <el-button-group>
                    <el-button icon="el-icon-refresh" @click="refreshData" size="mini"></el-button>
                </el-button-group>
            </div>
        </div>

        <el-table ref="multipleTable" :data="columnData" tooltip-effect="dark" style="width: 100%">
            <el-table-column label="序号" type="index" width="80"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="cdl_title" label="文件名称"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="newName" label="所属分类"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="cdl_size" label="文件大小(kb)"></el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="cdl_format" label="文件类型"></el-table-column>
            <el-table-column label="操作" fixed="right" width="260">
                <template slot-scope="scope">
                    <el-button size="mini" @click="download(scope.$index, scope.row)">下载预览</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'

    export default {
        //数据源
        data() {
            return {
                lastFid: 0,
            }
        },
        //初始化函数
        mounted() {
//          this.initData();
            this.initCategoryData();
            
        },
        //计算属性
        computed: {
            ...mapState({
                columnData: state => state.DownloadModule.columnData,
                categoryColumnData: state => state.DownloadCategoryModule.columnData
            }),
        },
        //组件方法
        methods: {
            initData() {
//              this.$myLoading.startLoading();
                this.$http.getHttp(
                    this.$API.cmsDownloadLibrarySearch + "/skip/0/limit/1000/cdl_is_delete/0",
                    rs => {
                        console.log(rs);
                        this.$myLoading.endLoading();
                        this.$store.commit("DownloadModule/updateColumnData", rs.data);
                        
                        for(var ss=0;ss<this.columnData.length;ss++){
                        	this.columnData[ss].newName = this.getMenuInfo(this.columnData[ss].cdl_cdcid);
                        }
                    }
                );
            },
            initCategoryData() {
                this.$myLoading.startLoading();
                this.$http.getHttp(
                    this.$API.cmsDownloadCategorySearch + "/skip/0/limit/1000/cdc_is_delete/0",
                    rs => {
                        console.log(rs);
//                      this.$myLoading.endLoading();
                        this.$store.commit("DownloadCategoryModule/updateColumnData", rs.data);
                        
            			this.initData();
                    }
                );
            },
            getMenuInfo(cid){

				var menuArr = this.categoryColumnData;
				
				//获取当前选中的菜单
				var nowItem = menuArr.filter((item)=>{
					return item.cdc_id == cid
				})
				
				return nowItem[0].cdc_name;
			
			},

            refreshData() {
                this.initData();
            },
            handleEdit(index, item) {
                this.$router.push({
                    path: "/editDownloadCategory",
                    query: {
                        cdl_id: item.cdl_id
                    }
                });
            },
            download(index, item) {
		        var a = document.createElement('a');          // 创建一个a节点插入的document
		        var event = new MouseEvent('click');           // 模拟鼠标click点击事件
		        a.download = item.cdl_title;                  // 设置a节点的download属性值
		        a.href = item.cdl_url;                                 // 将图片的src赋值给a节点的href
		        a.dispatchEvent(event)   
            },
            handleDelete(index, item) {
                var params = {
                    delete_where: 'cdl_id',
                    cdl_id: item.cdl_id,
                    cdl_is_delete:1
                };
                this.$myPop.confirmBox("确认操作", "确定要删除该文件吗？", () => {
                    this.$myLoading.startLoading();
                    this.$http.postHttp(this.$API.cmsDownloadLibraryDelete, params, rs => {
                        this.$myLoading.endLoading();
                        this.$myPop.SuccessMessage();
                        this.initData();
                    });
                });
            }
        },
    }
</script>

<style lang="stylus" scoped>
    @import '~PUBLIC_CSS';
</style>